<template>
    <div>
        <x-header :left-options="{showBack: false}">登陆{{openid}}</x-header>

        <toast v-model="showTips" position="bottom" type="text" width="20em">{{tipsContent}}</toast>

        <div style="background-color:yellow;text-align:center;">
            <span style="font-size:20px;">Loading</span>
            <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>
        </div>
        <x-input title="手机号码" type="number" is-type="china-mobile" name="mobile" ref="inputphone" @on-change="checkphone" v-model="form.mobile" required></x-input>
        <x-input title="验证码" type="number" :min="6" :max="6" name="vaildcode" ref="inputnum"  @on-change="checkval" v-model="form.smscode" required>
            <x-button slot="right" v-show="!disabled_vaild_text" :disabled="!disabled_sms" @click.native="getValidcode" type="primary" mini>获取验证码</x-button>
            <x-button slot="right" v-show="disabled_vaild_text" :disabled="true" type="primary" mini>{{count}}秒后重发验证</x-button>
        </x-input>
        <flexbox>
            <flexbox-item>
                <x-button :text="submit_text" :disabled="disabled_text" @click.native="process" type="primary"></x-button>
            </flexbox-item>
        </flexbox>
    </div>
</template>

<style>
.ximg-demo {
  width: 100%;
  height: auto;
}

.ximg-error {
  background-color: white;
}

.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>

<script>
import util from "@/utils/";
import { sendsms, regmember } from "@/api/member";

import {
  Toast,
  XImg,
  XButton,
  XHeader,
  XInput,
  Flexbox,
  FlexboxItem
} from "vux";

export default {
  name: "login",
  data() {
    return {
      submit_text: "注     册",
      disabled_text: true,
      submit_vaild_text: "发送验证码",
      disabled_vaild_text: false,
      disabled_sms: false,
      timer: null,
      openid: "",
      count: "",        
      headpic: "",
      tipsContent: "",
      validsms: false,
      showTips: false,
      form: {
        username: "",
        access_token: "",
        openid: "",
        smscode: "",
        mobile: ""
      },
      src: "https://o5omsejde.qnssl.com/demo/test1.jpg"
    };
  },
  created() {
    if (!util.cookie.get("openid")) {
      window.location.href = "http://www.baidu.com"
    }
    this.openid = util.cookie.get("openid")
    this.headpic = util.cookie.get("headpic")
  },
  methods: {
    getValidcode() {
      console.log(this.form.mobile);
      let smsok = false;
      sendsms(this.form.mobile, this.form.smscode).then(response => {
        smsok = response.data.result;
        console.log(response);
        console.log(smsok);
      });

      if (!this.timer) {
        this.count = util.sms_second;
        this.disabled_vaild_text = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= util.sms_second) {
            this.count--;
          } else {
            this.disabled_vaild_text = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    checkphone(val) {
      if (this.$refs.inputphone.valid) {
        this.disabled_sms = true;
      } else {
        this.disabled_sms = false;
      }
    },
    checkval(val) {
      if (this.$refs.inputphone.valid && this.$refs.inputnum.valid) {
        this.disabled_text = false;
      } else {
        this.disabled_text = true;
      }
    },
    success(src, ele) {
      console.log("success load", src);
      const span = ele.parentNode.querySelector("span");
      ele.parentNode.removeChild(span);
    },
    error(src, ele, msg) {
      console.log("error load", msg, src);
      const span = ele.parentNode.querySelector("span");
      span.innerText = "load error";
    },
    process() {
      this.submit_text = "注册中..."
      this.disabled_text = true
      let res = false
      regmember(this.form.mobile,this.form.smscode,this.openid,this.headpic).then(response => {
        res = response.data.result;
        if (!res){
          this.tipsContent = response.data.message
          this.showTips = true
          this.disabled_text = false
          this.submit_text = "注     册"
        }else{
          //完成注册，跳转首页

        }           

        console.log(response)
        console.log(res)
      });
    }
  },
  components: {
    Toast,
    XImg,
    XButton,
    Flexbox,
    FlexboxItem,
    XInput,
    XHeader
  }
};
</script>
